<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用原型继承实现tab切换</title>
    <style>
        body,article{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        article{
            flex-direction: column;
            margin-right: 200px;
        }

        div{
            width: 400px;
            height: 60px;
            display: flex;
        }

        a,span{
            text-decoration: none;
            display: inline-block;
            flex: 0 0 50%;
            max-width: 50%;
            height: 100%;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            background: grey;
            border:1px solid #333;
            box-sizing: border-box;
            color: white;
        }

        section{
            width: 500px;
            height: 500px;
            position: absolute;
            top: 60px;
            font-size: 35px;
            background: orange;
            text-align: center;
            line-height: 500px;
        }

        section:nth-of-type(1){
            background: green;
        }
    </style>
</head>
<body>
    <article class="first">
        <div>
            <a href="javascript:void(0);">1</a>
            <a href="javascript:void(0);">2</a>
        </div>
    
        <section>1</section>
        <section>2</section>
    </article>
    <article class="second">
        <div>
            <span href="javascript:void(0);">1</span>
            <span href="javascript:void(0);">2</span>
        </div>
    
        <section>1</section>
        <section>2</section>
    </article>

    <script>
        function extend(sub,sup){
            sub.prototype = Object.create(sup.prototype);
            Object.defineProperty(sub.prototype,'constructor',{
                valeue : sub,
                enumerator : false
            });
        }

        function Animation(){}
        Animation.prototype.show = function(){
            this.style.display = 'block';
        }
        Animation.prototype.hide = function(){
            this.style.display = 'none';
        }
        Animation.prototype.background = function(color){
            this.style.background = color;
        }

        // let hd = document.querySelector('article');
        // Animation.prototype.hide.call(hd);

        function Tab(args){
            args = Object.assign({el:null,links:'a',section:'section',callback:null},args);
            this.tab = document.querySelector(args['el']);
            this.links = this.tab.querySelectorAll(args['links']);
            this.section = this.tab.querySelectorAll(args['section']);
            this.callback = args['callback'];
        }

        extend(Tab,Animation);

        // 初始化
        Tab.prototype.run = function(){
            this.bindEvents();
            this.reset();
            this.action(0);
        }

        // 绑定事件
        Tab.prototype.bindEvents = function(){
            this.links.forEach((element,idx) => {
                element.addEventListener('click',() => {
                    this.action(idx);
                })
            });
        }

        // 操作
        Tab.prototype.action = function(idx){
            this.reset();
            if(this.callback) {this.callback()};
            this.background.call(this.links[idx],'orange');
            this.show.call(this.section[idx]);
        }

        // 重置
        Tab.prototype.reset = function(){
            this.links.forEach(element => {
                this.background.call(element,'grey');
            });
            this.section.forEach(element => {
                this.hide.call(element)
            })
        }


        new Tab({el:'.first',callback:function(){
            console.log("后盾人");
        }}).run();
        new Tab({el:'.second',links:'span'}).run();
    </script>
</body>
</html>